<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>店铺查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/weixin/css/integralSystem.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/weixin/css/mui.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/weixin/css/mui.picker.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/weixin/css/mui.poppicker.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/weixin/css/app.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/weixin/js/jquery-1.10.2.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/weixin/js/integralSystem.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/weixin/js/mui.min.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/weixin/js/mui.picker.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/weixin/js/mui.poppicker.js" ></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/assets/js/jquery.cookie.js"></script>
		<style>
 
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>
	<body >

			
	<div id="main">
			<div id="head">
				<div class="retreat"><img  src="${pageContext.request.contextPath}/resource/weixin/image/retreat.png" class="retreatPicture"/></div>
                <div class="title">店铺查询</div>
				<div class="screen " id='showUserPicker'>筛选</div> 
			</div>
			
			<!--下拉刷新容器-->
				<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="height:100%;position: relative;">
					<div class="mui-scroll">
						<!--数据列表-->
						<div class="mui-table-view mui-table-view-chevron" style="background:none"></div>
					</div>
				</div>
		
	</div>
	</body>
	
	
	
	<script type="text/javascript">

			var currentPage = 0;
			//var userId = $.cookie("userId");
			var type = 0;
				mui.init({
					pullRefresh: {
						container: '#pullrefresh',
						up: {
							contentrefresh: '正在加载...',
							callback: pullupRefresh
						}
					}
				});
				
				function pullupRefresh() {
					currentPage++;
					$.ajax({
						url:'/WisdomHome/weixin/merchant_more',
						type:'post',
						dataType:'json',
						data:{
							//userId:userId,
							pageIndex:currentPage,
							type:type
						},
						success:function(data){
		
							if (data == 205) {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
								console.log("user is not exist!");
								return;
							}
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(!data.hasNextPage);
							var div = document.body.querySelector('.mui-table-view');
							var cells = document.body.querySelectorAll('.mui-table-view-cell');
							$.each(data.dataList,function(){					

								var table=document.createElement('table');
								table.setAttribute("class", "merchanttbinfo");
								var r = table.insertRow(0);
								var c = r.insertCell(0);
								c.setAttribute("rowspan","2");
								//c.setAttribute("valign","bottom");
								//c.setAttribute("width","15%");
								c.className="center";
								//c.setAttribute("font-size","10px");
								c.className+=" typeicon";
								
								if(this.type==1){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/supermarket.png" class="industryicon"/><br/>超市';
									c.style.color="#f6ae40";
								}else if(this.type==2){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/car.png" class="industryicon" /><br/>爱车';
									c.style.color="#fc6f92";
								}else if(this.type==3){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/fruit.png" class="industryicon"/><br/>水果';
									c.style.color="#da3b40";
								}else if(this.type==4){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/train.png" class="industryicon"/><br/>培训';
									c.style.color="#6fc65d";
								}else if(this.type==5){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/glasses.png" class="industryicon"/><br/>眼镜';
									c.style.color="#3fb7f6";
								}else if(this.type==6){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/plane.png" class="industryicon"/><br/>旅游';
									c.style.color="#dc68c2";
								}else if(this.type==20){
									c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/other.png" class="industryicon"/><br/>其他';
									c.style.color="#fa684b";
								}
								
								c=r.insertCell(1);
								c.innerHTML=this.name;
								c.setAttribute("valign","bottom");
								c.setAttribute("width","35%");
								//c.setAttribute("margin-top","30px");
								c=r.insertCell(2);
								c.setAttribute("width","10%");
								c.innerHTML='<img src="${pageContext.request.contextPath}/resource/weixin/image/phone.png" class="phoneicon"/>';
								c.setAttribute("rowspan","2");
								c=r.insertCell(3);
								c.setAttribute("width","40%");
								c.innerHTML="<a style='color: #339fdb;' href='wtai://wp//mc;"+this.tel+"'>"+this.tel+"</a>";
								c.setAttribute("color","black");   
								c.setAttribute("rowspan","2");
								r=table.insertRow(1);
								
								c= r.insertCell(0);
								
								c.innerHTML=this.address;
								c.setAttribute("width","35%");
								//c.setAttribute("valign","top");
								c.setAttribute("class", "address");
								div.appendChild(table);
							});
						},
						error:function(data){
							
						}
					});
				}
				if (mui.os.plus) {
					mui.plusReady(function() {
						setTimeout(function() {
							mui('#pullrefresh').pullRefresh().pullupLoading();
						}, 1000);
		
					});
				} else {
					mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}
				
				/*function showDetail(){
					$("#announceId").val(this.title);
					$("#detailForm").submit();
				}*/

		
				(function($, doc) {
					$.init();
					$.ready(function() {
						//普通示例 
						//var userPicker = new $.PopPicker();
						//var userPicker = PopPicker;
						//alert('userpicker');
					    var userPicker = new $.PopPicker();
						userPicker.setData([{
							value: '0',
							text: '全部'
						}, {
							value: '1',
							text: '超市'
						}, {
							value: '2',
							text: '爱车'
						}, {
							value: '3',
							text: '水果'
						}, {
							value: '4',
							text: '培训'
						}, {
							value: '5',
							text: '眼镜'
						}, {
							value: '6',
							text: '旅游'
						}, {
							value: '20',
							text: '其他'
						}]);
						var showUserPickerButton = doc.getElementById('showUserPicker');
						var userResult = doc.getElementById('userResult');
						showUserPickerButton.addEventListener('tap', function(event) {
							userPicker.show(function(items) {
								//userResult.innerText = JSON.stringify(items[0]);
								//alert(items[0].value);
								//返回 false 可以阻止选择框的关闭
								//return false;
								 var div = document.body.querySelector('.mui-table-view');
								var cells = document.body.querySelectorAll('.mui-table-view-cell');
								div.innerHTML="";  
								currentPage = 0;
								type = items[0].value;
								mui('#pullrefresh').pullRefresh().refresh(true);
								mui('#pullrefresh').pullRefresh().pullupLoading();
								
							});
						}, false);
						
								});
				})(mui, document);
		</script>
		
</html>
